<!DOCTYPE html>
<html>

<!-- HEADER START -->
<?php 

require_once("DB_Config.php");


// $q = 'SELECT * FROM state';
$db_connect = DB_Connection::getInstance();
// $stmt = $db_connect->db_conn->prepare($q);

?>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link href="css/style.css" rel='stylesheet' type='text/css' />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.package-slider.js"></script>
<!--[if IE]><script type="text/javascript" src="js/IE.HTML5.js"></script><![endif]-->


<script type="text/javascript">
//case district been changed and need to change to city select
function cit() {   
    var e = document.getElementById("district");
    var dis_name = e.options[e.selectedIndex].value;
    var flag=1;  //recognaizing in data.php who called him
     $('#city').load('data.php?dis_name=' + escape(dis_name) + '&flag=' + escape(flag)) ;
}
//case number of minimum rooms been change so we need to update the max num of rooms
function min_room() {   
    var e = document.getElementById("min_num_room");
    var minroom = e.options[e.selectedIndex].value;
    var flag=2;  //recognaizing in data.php who called him
     $('#max_num_room').load('data.php?minroom=' + escape(minroom) + '&flag=' + escape(flag)) ;
}
//case number of minimum floor been change so we need to update the max num of floor
function floor_range() {   
    var e = document.getElementById("minfloor");
    var min_floor = e.options[e.selectedIndex].value;
    var flag=3;  //recognaizing in data.php who called him
     $('#maxfloor').load('data.php?min_floor=' + escape(min_floor) + '&flag=' + escape(flag)) ;
}
//fixing the appartment size to be legal
function appar_size() {
    var e = document.getElementById("rsize");
    if ( isNaN(e.value) || (e.value > 600) || (e.value < 0) ) {
        alert("ivalid number, please enter numbet between 0-600");
        e.value="";
    }
}
//chaecking that the minimum price range is correct
function p_range_min() {
    var e = document.getElementById("prangemin");
    if ( isNaN(e.value) || (e.value < 99) || (e.value > 50000000) ) {
        alert("ivalid price , please enter price higher then 99");
        e.value="";
    }
    else{
        var x =  e.value;
        x++;
        var e = document.getElementById("prangemax");
        e.value=x;
    }
}
//chaecking and updating  the minimum price range is correct
// function p_range_max() {
//     var e = document.getElementById("prangemin");
//      b = e.value;
//     var e = document.getElementById("prangemax");
//     if ( isNaN(e.value) || ( e.value < b ) || (e.value > 50000000) ) {
//         alert("Ivalid price");
//         e.value="";
//     }
// }
//showing the date tketch
$(function() {
    $( "#datetab" ).datepicker({  maxDate: "+0D" ,dateFormat: 'yy-mm-dd'});
  });

</script>

</head>

<body>
<!-- START HEADER WRAPER-->
<div id="header-color">
	<div id="header-wrapper">

		<?php require("header.php"); ?>
		

	</div>
</div>

<!-- START CONTENT WRAPER-->
<div id="page-wrapper">
<form name="house_searching" method="post" action="search_shower.php">
    <div class="home_search">

        <tr>
            <td>
                <div>
                    <label>District</label>
                    <span class="select">
                    <select id="district" name="district" style="width: 100px;" onchange="cit()">
                        <option value="0"></option>
                        <?php
                            $q = 'SELECT DISTINCT district  FROM cities';
                            $stmt = $db_connect->db_conn->prepare($q);
                            if ($stmt->execute()){
                                 $res = $stmt->fetchAll(PDO::FETCH_ASSOC);
                                 $i = 0; 
                                 while ($i < count($res)) {                     
                            ?>
                            <option value= "<?php  echo $res[$i]['district']; ?>" >
                                <?php  echo $res[$i]['district']; $i++; ?> 
                            </option>
                            <?php 
                                } }
                            ?>
                    </select>
                    </span>

                </div>
            </td>
            <div>&nbsp&nbsp&nbsp</div>
            <td>
                <div>
                    <label>City</label>
                    <span class="select">
                        <select id ="city" name="city" style="width: 130px;" >
                            <option selected="selected" value=""></option>
                        </select>
                    </span>
                </div>
            </td>
            <div>&nbsp&nbsp&nbsp</div>
            <td>
                 <div>
                    <label>Number of bedrooms</label>
                    <span class="select">
                        <select id ="min_num_room" name="min_num_room" style="width: 55px;" onchange="min_room()">
                            <option value= "1"   >1   </option>
                            <option value= "1.5" >1.5 </option>
                            <option value= "2"   >2   </option>
                            <option value= "2.5" >2.5 </option>
                            <option value= "3"   >3   </option>
                            <option value= "3.5" >3.5 </option>
                            <option value= "4"   >4   </option>
                            <option value= "4.5" >4.5 </option>
                            <option value= "5"   >5   </option>
                            <option value= "5.5" >5.5 </option>
                            <option value= "6"   >6   </option>
                            <option value= "6.5" >6.5 </option>
                            <option value= "7"   >7   </option>
                            <option value= "7.5" >7.5 </option>
                            <option value= "8"   >8   </option>
                            <option value= "8.5" >8.5 </option>
                            <option value= "9"   >9   </option>
                            <option value= "9.5" >9.5 </option>
                            <option value= "10"  >10  </option>
                            <option value= "10.5">10.5</option>
                            <option value= "11"  >11  </option>
                            <option value= "11.5">11.5</option>
                            <option value= "12"  >12  </option>
                        </select>
                    </span>
                    <span class="select">
                        <select id ="max_num_room" name="max_num_room" style="width: 55px;">
                            <option value="12">12</option>
                        </select>
                    </span>
                </div>
            </td>
            <div>&nbsp&nbsp&nbsp</div>
            <td>
                <div>
                    <label>Floors you seek</label>
                    <span class="select">
                        <select id ="minfloor" name="minfloor" style="width: 55px;" onchange="floor_range()">
                            <option value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="100">20+</option>
                        </select>
                    </span>
                    <span class="select">
                        <select id ="maxfloor" name="maxfloor" style="width: 55px;">
                            <option value="100">20+</option>
                        </select>
                    </span>
                </div>
            </td>
            <div>&nbsp&nbsp&nbsp</div>
            <td>
                <div>
                    <label>M ²</label>
                    <span class="select">
                        <input type="text" name="rsize" id="rsize" value="" style="width: 25px;" onchange="appar_size()">
                    </span>
                </div>
            </td>
            <div>&nbsp&nbsp&nbsp</div>
            <td>
                <div>
                    <label>Ad Age   </label>
                    <span class="select">
                        <input type="text" name="datetab" id="datetab" value="" style="width: 65px;" >
                        </input>
                    </span>
                </div>
            </td>
            <div>&nbsp&nbsp&nbsp</div>
            <td>
                <input name="Search" type="submit" value="Search" class="button" id="search_but" />
            </td>
            <br>
            <td>
                <div>
                    <label>Price Range</label>
                    <span class="select">
                        <input type="text" name="prangemin" id="prangemin" value="99" style="width: 60px;" onchange="p_range_min()">
                    </span>
                    <span class="select">
                        <input type="text" name="prangemax" id="prangemax" value="1000000" style="width: 60px;" onchange="p_range_max()">
                    </span>
                </div>
            </td>
            <div>&nbsp&nbsp&nbsp</div>
            <td>
                <div>
                    <label>Property</label>
                    <span class="select">
                        <select id ="property" name="property" style="width: 140px;" >
                            <option value="apartment">Apartment</option>
                            <option value="studio">Studio</option>
                            <option value="penthouse">Penthouse</option>
                            <option value="basement">Basement</option>
                            <option value="apartment">Apartment</option>
                            <option value="duplex">Duplex</option>
                            <option value="triplex">Triplex</option>
                            <option value="housing_unit">Housing unit</option>
                            <option value="warehouse">Warehouse</option>
                            <option value="residential_building">Residential building</option>
                            <option value="lot">Lot</option>
                        </select>
                    </span>
                </div>
            </td>
            <div>&nbsp&nbsp&nbsp</div>
            <td>
                <div>
                    <label>Purpose</label>
                    <span class="select">
                        <select id ="purpose" name="purpose" style="width: 80px;">
                            <option selected="selected" value="renthouse">rent</option>
                            <option value="sellhouse">buy</option>
                            <option value="partnerhouse">pertners</option>
                        </select>
                    </span>
                </div>
            </td>
            <br>
            <td>
                <input type="checkbox" value="1" name="warehouse" id="warehouse" style="margin:50px 0px 0px -416px">
                <span> Warehouse &nbsp&nbsp&nbsp</span>
            </td>

            <td>
                <input type="checkbox" value="1" name="garage" id="garage" style="margin:30px 0px 0px 0px">
                <span> Garage &nbsp&nbsp&nbsp</span>
            </td>

            <td>
                <input type="checkbox" value="1" name="alevator" id="alevator" style="margin:30px 0px 0px 0px">
                <span> Alevator &nbsp&nbsp&nbsp</span>
            </td>

            <td>
                <input type="checkbox" value="1" name="video" id="video" style="margin:30px 0px 0px 0px">
                <span> Video &nbsp&nbsp&nbsp</span>
            </td>

            <td>
                <input type="checkbox" value="1" name="picture" id="picture" style="margin:30px 0px 0px 0px">
                <span> Picture &nbsp&nbsp&nbsp</span>
            </td>

            <td>
                <input type="checkbox" value="1" name="aircon" id="aircon" style="margin:30px 0px 0px 0px">
                <span> Air Conditioner &nbsp&nbsp&nbsp</span>
            </td>
        </tr>
    </div>
</form>
<!-- END CONTENT WRAPER-->
</div>

<!-- START FOOTER WRAPER-->
<p><?php require("footer.php"); ?></p>
</body>
</html>